<template>
  <div>
    <div v-show="!(isShowDetail)">
      <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="accountInfo" ref="accountInfo">
          <el-form-item label="采购商企业名:" prop="enterpriseName">
            <el-input v-model.trim="accountInfo.enterpriseName" clearable @keyup.enter.native="enterNextInput('telphone')" ref="input-enterpriseName"></el-input>
          </el-form-item>
          <el-form-item label="采购商账号:" prop="telphone">
            <el-input v-model.trim="accountInfo.telphone" clearable @keyup.enter.native="onSearch" ref="input-telphone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('accountInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="balanceAvailable" slot-scope="account">
            <div>
              <div>￥{{account.row.balanceAvailable && account.row.balanceAvailable != 0 ? formatMoney.twoDecimal(account.row.balanceAvailable) : '0.00'}}</div>
              <el-button type="text" @click="watchMoney('充值余额流水', 1, account.row)">查看流水</el-button>
            </div>
          </template>
          <template slot="score" slot-scope="account">
            <div>
              <div>￥{{account.row.score && account.row.score != 0 ? formatMoney.twoDecimal(account.row.score) : '0.00'}}</div>
              <el-button type="text" @click="watchMoney('鲜丰信用余额流水', 2, account.row)">查看流水</el-button>
            </div>
          </template>
          <template slot="jxfAvailable" slot-scope="account">
            <div>
              <div>￥{{account.row.jxfAvailable && account.row.jxfAvailable != 0 ? formatMoney.twoDecimal(account.row.jxfAvailable) : '0.00'}}</div>
              <el-button type="text" @click="watchMoney('鲜丰惠余额流水', 3, account.row)">查看流水</el-button>
            </div>
          </template>
          <template slot="status" slot-scope="account">
            <div>{{account.row.status === 0 ? "冻结" : "正常"}}</div>
          </template>
          <template slot="operation" slot-scope="account">
            <!--<el-button type="text" @click="showSetting">查看详情</el-button>-->
            <el-button type="text" @click="unFreezeAccount(account.row)" v-if="account.row.status === 0" class="c-red">解冻</el-button>
            <el-button type="text" @click="freezeAccount(account.row)" v-else class="c-red">冻结</el-button>
            <!--<el-button type="text" @click="watchAccountInfo">查看账户信息</el-button>-->
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <FreezeAccount :isShowDetail.sync="isShowFreezeModel" :dataInfo="dataInfo" @fresh="fresh"></FreezeAccount>
    <UnFreezeAccount :isShowDetail.sync="isShowUnFreezeModel" :dataInfo="dataInfo" @fresh="fresh"></UnFreezeAccount>
  </div>
</template>

<script>
  import FreezeAccount from './components/FreezeAccount'
  import UnFreezeAccount from './components/UnFreezeAccount'
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  export default {
    name: "MerchantCapitalAccount",
    components: { FreezeAccount, UnFreezeAccount },
    props: {

    },
    data() {
      return {
        title: "采购商资金账户",
        formatMoney: formatMoney,
        FormatDate: FormatDate,
        accountInfo: {
          enterpriseName: "",
          telphone: this.$route.params && this.$route.params.telphone ? this.$route.params.telphone : ""
        },
        isSuccess: false,
        isShowFreezeModel: false,
        isShowUnFreezeModel: false,
        isShowDetail: false,
        dataInfo: {},
        detailTitle: "",
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          hasOperation:false,
          tr: [
            {
              id: '1',
              minWidth: '140',
              label: '采购商企业名称',
              fixed: "left",
              prop: 'enterpriseName'
            },
            {
              id: '2',
              minWidth: '140',
              label: '采购商主体账号',
              prop: 'telphone'
            },
            {
              id: '3',
              minWidth: '140',
              label: '充值余额（元）',
              prop: 'balanceAvailable',
              show: 'template'
            },
            {
              id: '4',
              minWidth: '160',
              label: '鲜丰信用余额（元）',
              prop: 'score',
              show: 'template'
            },
            {
              id: '5',
              minWidth: '160',
              label: '鲜丰惠余额（元）',
              prop: 'jxfAvailable',
              show: 'template'
            },
            {
              id: '6',
              label: '账号状态',
              show: 'template',
              prop: 'status'
            },
            {
              id: '7',
              label: '操作',
              show: 'template',
              fixed: "right",
              minWidth:"200",
              prop: 'operation'
            }
          ],
          operation: [],
          data: []
        },
        pageTotal:40,
        pageSize:10,
        currentPage:1
        // 结算账户

        // 余额账户

      }
    },
    methods: {
      // 导出订单
      exportExcel() {
        this.isSuccess = true;
        let data = {
          ...this.accountInfo
        }
        ajax.export(apis.finance.exportMerchantList, data).then((res) => {
          this.isSuccess = false;
          if(res.code) {
            if(res.code === "10000000") {

            } else {
              this.$message.error(res.message)
            }
          }
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData()
      },
      fresh() {
        this.getData()
      },
      refreshFuc() {
        this.resetForm('accountInfo')
        this.currentPage = 1;
        this.pageSize = 10
        this.getData()
      },
      enterNextInput(inputName) {
        this.$refs["input-" + inputName].focus();
      },
      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.accountInfo,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.finance.capitalList, data).then(res => {
          if(res.code === "10000000") {
            this.dataTable.data = res.data.dataList;
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.dataTable.loading = false;
        })
      },
      watchMoney(title, type, obj) {
          let data = {
            title: title,
            userId: obj.userId,
            url: type === 1 ? apis.finance.getMerchantBalanceList : type === 2 ? apis.finance.getCreditRecordList : apis.finance.getXfhBalanceList
          }
          if(type === 1) {
            this.$router.push({name: 'balanceFlow',params: data});
          } else if(type === 2) {
            this.$router.push({name: 'xinBalance',params: data});
          } else {
            this.$router.push({name: 'xfhBalance',params: data});
          }
      },
      freezeAccount(obj) {
        this.dataInfo = obj;
        ajax.get(apis.finance.getGmTel).then(res => {
          if(res.code == "10000000") {
            this.dataInfo.gmTel = res.data;
            this.isShowFreezeModel = true;
          }
        })
      },
      unFreezeAccount(obj) {
        this.dataInfo = obj;
        ajax.get(apis.finance.getGmTel).then(res => {
          if(res.code == "10000000") {
            this.dataInfo.gmTel = res.data;
            this.isShowUnFreezeModel = true;
          }
        })

      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
        this.accountInfo.telphone = ""
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style scoped>

</style>
